<template>
  <div class="department-container">
    <!-- data数据必须是一个数组， 数组里面有几个元素，这个树形组件就会有几个一级节点 -->
    <!-- el-tree 组件内部 会自己有个 v-for循环的标签，不用我们自己去循环， 和el-table类似 -->
    <el-tree :data="data" :props="defaultProps" :expand-on-click-node="false">
      <!-- <template v-slot="slotscope"> -->
      <!-- <template slot-scope="slotscope"> -->
      <!-- Variable 'data' is already declared in the upper scope 这个警告是啥意思？ -->
      <!-- 这个警告是eslint的警告，是说上面有data变量，你这里又结构data变量，怕你用冲突了，就警告你，
        但是不会报错，不用管，或者说你把最上面的data改了，js里面data也改了，下面的解构变量不能改，或者不好改
       -->
      <!-- 为什么这里可以解构data出来， 就是因为 我们通过打印，发现slotscope 里面的变量是个对象
        就两个属性，一个是node，一个是data，我们只需要data，就解构了data，官网里面最后面也有解释
       -->
      <template v-slot="{ data }">
        <el-row style="width: 100%">
          <el-col :span="20"><div @click="test(data)" />{{ data.label }}</el-col>
          <el-col :span="4">
            <div class="rigth-ele">
              <span class="re-name">管理员</span>
              <!-- 碰到不好写的组件，复杂的组件，一定是去看element-ui，或者去网上搜 vue 下拉组件 -->
              <el-dropdown class="re-drop">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>编辑部门</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
// const obj = { node: 123, data: 456 }
// // const { node: node, data: data } = obj
// const { node: node, data: data } = { node: 123, data: 456 }
import { companyDepartmentRequest } from '@/api/department'

export default {
  name: 'Department',
  data() {
    return {
      // 数据驱动视图，我们只需要关心数据即可，页面结构不需要动
      data: [
        {
          abc: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          abc: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          abc: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    // 不要这created入口函数里面，写太多的逻辑代码，一般是放在methods里面去写函数
    // 然后再在created里面调用
    this.companyDepartmen()
  },
  methods: {
    async companyDepartmen() {
      const res = await companyDepartmentRequest()
      console.log(res)
    },
    test(a) {
      console.log(a)
    }
  }
}
</script>

<style lang="scss" scoped>
// calc 是一个css函数，可以动态的计算一个元素的宽度和高度
// width: calc(100% - 100px)
// width: calc(100vh - 50px)
.department-container {
  margin: 30px 50px;
  .rigth-ele {
    .re-name {
      margin-right: 10px;
    }
    .re-drop{}
  }
}
</style>
